<template>
  <div class="left-card">
    <div class="search-box">
      <a-input-search
        :value="searchText"
        @update:value="$emit('update:searchText', $event)"
        placeholder="片区名称"
        style="width: 100%"
      />
    </div>
    <a-tree
      :selected-keys="selectedKeys"
      :expanded-keys="expandedKeys"
      :tree-data="treeData"
      @update:selected-keys="$emit('update:selectedKeys', $event)"
      @update:expanded-keys="$emit('update:expandedKeys', $event)"
      @select="$emit('select', $event)"
    >
      <template #title="{ title }">
        <span class="tree-node">{{ title }}</span>
      </template>
    </a-tree>
  </div>
</template>

<script setup lang="ts">
defineProps<{
  searchText: string
  selectedKeys: string[]
  expandedKeys: string[]
  treeData: any[]
}>()

defineEmits<{
  'update:searchText': [value: string]
  'update:selectedKeys': [keys: string[]]
  'update:expandedKeys': [keys: string[]]
  'select': [selectedKeys: string[], e: any]
}>()
</script>

<style scoped>
.left-card {
  width: 280px;
  background: white;
  padding: 20px;
  border-radius: 8px;
  min-height: calc(100vh - 48px);
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
}

.search-box {
  margin-bottom: 16px;
}

:deep(.ant-tree) {
  flex: 1;
  overflow: auto;
}

.tree-node {
  cursor: pointer;
}

:deep(.ant-tree-node-content-wrapper:hover) {
  background-color: #e6f7ff;
}
</style> 